<template>
<fadeAnimation>
    <div class="detail-header" v-if="ifHeaderShow">
    <navbar>
      <router-link
        to="/home"
        class="iconfont back"
        slot="left"
        tag="div">&#xe61e;</router-link>
      <div class="title" slot="title">商品详情</div>
    </navbar>
  </div>
</fadeAnimation>
</template>
<script>
import navbar from '@/base/navbar'
import fadeAnimation from '@/base/fadeAnimation'
export default {
  name: 'detailHeader',
  components: {
    navbar,
    fadeAnimation
  },
  data () {
    return {
      ifHeaderShow: false
    }
  },
  methods: {
    show () { // 显示头部
      this.ifHeaderShow = true
    },
    hide () { // 隐藏头部
      this.ifHeaderShow = false
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables'
.detail-header
  background $bgColor
  width 100%
  position absolute
  top 0
  left 0
  z-index 20
  font-size 20px
  color #eee
  .back
    margin-left 10px
    font-size 16px
</style>
